<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>jQuery级联插件</title>
        
		<style>
			.d-n{ display:none;}
		</style>
    </head>
    <body>
    	<div id="selectWrap">
        	<select>
            	<option>请选择一级类目</option>
            </select>
            
            <select class="d-n">
            	<option>请选择二级级类目</option>
            </select>
            
            <select class="d-n">
            	<option>请选择三级级类目</option>
            </select>
        </div>
		
		<script type="text/javascript" src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-1.8.3.min.js"></script>
        <script type="text/javascript" src="jquery.cascade.js"></script>
        
        <script type="text/javascript">
            $(function(){
				var source = [{
							"id": 173,
							"name": "无争一级类目",
							"childrenCategory": [
								{
									"id": 174,
									"name": "无争2级类目",
									"childrenCategory": [
										{
											"id": 176,
											"name": "无争3级类目",
											"childrenCategory": [
												{
													"id": 177,
													"name": "无争4级类目"    
												}
											]
										}
									]
								}
							]
						}];
						
				$("#selectWrap").cascade({ 
					source: source,
                    childrenDataName:'childrenCategory',
					onChange: function(index){
						console.log(this.html());
					}
				});
			});
 
            
        </script>
    </body>
</html>
